<template>
  <div id="handleDialog">
    <el-dialog title="处理" :visible.sync="handleDialogData.isShow" width="32%">
      <div class="dialog-box">
        <div class="button-group">
          <el-button
            :type="buttonActive ? 'success' : 'info'"
            @click="changeEffectiveButton"
          >
            有效投诉
          </el-button>
          <el-button
            :type="!buttonActive ? 'success' : 'info'"
            @click="changeInvalidButton"
          >
            无效投诉
          </el-button>
        </div>
        <div v-show="buttonActive" class="radio-box">
          <el-radio-group v-model="radio" @change="radioChange">
            <template v-for="(item, index) in treatment">
              <div class="radio-box-item" :key="index">
                <el-radio :label="item.dictLabel">
                  {{ item.dictLabel }}
                </el-radio>
              </div>
            </template>
            <div class="radio-box-item">
              <el-radio label="其他" class="other-radio">
                其他
              </el-radio>
              <el-input v-model="reason"></el-input>
            </div>
          </el-radio-group>
        </div>
        <div class="tips">
          提示：该处“处理”仅作为实际处理后的备注，不会进行实际处理
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="confirmHandle">确 定</el-button>
        <el-button @click="handleDialogData.isShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  props: {
    handleDialogData: {
      type: Object,
      default: () => {
        return {
          isShow: false,
          params: ''
        }
      }
    }
  },
  data() {
    return {
      buttonActive: true,
      radio: '投诉内容已核实，作业已标注',
      processMode: '投诉内容已核实，作业已标注',
      complainStatu: 'Y',
      treatment: [],
      reason: ''
    }
  },
  watch: {
    // radio(val) {
    //   console.log(val)
    //   if (val !== '其他') {
    //     this.processMode = this.radio
    //   }
    // }
  },
  mounted() {
    this.getTreatment()
  },
  methods: {
    async getTreatment() {
      let treatment = await sysNormalDisable('complain_handler_param')
      this.treatment = treatment
    },
    // 点击有效投诉按钮
    changeEffectiveButton() {
      this.complainStatu = 'Y'
      this.buttonActive = true
    },
    // 点击无效投诉按钮
    changeInvalidButton() {
      this.complainStatu = 'N'
      this.buttonActive = false
    },
    radioChange(val) {
      this.processMode = val
      console.log(val)
    },
    // 确定操作
    confirmHandle() {
      if (this.radio === '其他') {
        this.processMode = this.reason
        if (this.processMode.trim().length === 0) {
          this.$alert('请输入处理方式!', '系统提示', {
            confirmButtonText: '确定'
          })
          return false
        }
      }
      this.$confirm('确认要处理吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let params = {
            complainStatu: this.complainStatu,
            processMode: this.processMode
          }
          if (params.complainStatu === 'N') {
            params.processMode = ''
          }
          this.$emit('handleRequest', params)
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
#handleDialog {
  .dialog-box {
    padding: 0 30px;
  }
  .radio-box {
    padding-top: 25px;
    .radio-box-item {
      margin-bottom: 10px;
      .other-radio {
        margin-right: 10px;
      }
      .el-input {
        width: 200px;
        :deep(.el-input__inner) {
          height: 30px !important;
          padding: 0 5px;
        }
      }
    }
  }
  .tips {
    margin-top: 20px;
    margin-bottom: 15px;
  }
}
</style>
